<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cmd_webgl_study3</title>
</head>
<body>
<!-- 1.创建webgl标签 -->
<canvas id="webgl" width="500" height="500"></canvas>
<script type="shader" id="vertex">
        attribute vec4 apos;
        void main(){
            gl_PointSize = 20.0;
            gl_Position = apos;
        }
    </script>
<script type="shader" id="fragment">
    precision mediump float;
    void main(){
        float r = distance(gl_PointCoord,vec2(0.5,0.5));
        if(r < 0.5)
        {
            gl_FragColor = vec4(0.0,1.0,0.0,1.0);
        }
        else
        {
            discard;
        }
    }
</script>
<script src="./libs/webgl_libs.js"></script>
<script>
    // 2.得到canvas element
    let canvas = document.getElementById('webgl');
    // 3.得到上下文对象 context
    let gl = canvas.getContext('webgl');

    //4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
    let vertex_shader_source = document.getElementById("vertex").innerHTML;

    //5.片元着色器源代码：描述一个点的颜色 片元着色器
    let fragment_shader_source = document.getElementById("fragment").innerHTML;



    let program = create_program(gl,vertex_shader_source,fragment_shader_source);

    let apos = gl.getAttribLocation(program,'apos');
    let x1 = 0.0;
    let y1 = 0.0;
    gl.vertexAttrib2f(apos,x1,y1);

    // 13.设置背景色
    gl.clearColor(1.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 14.绘制
    gl.drawArrays(gl.POINTS,0,1);

</script>
</body>
</html>